<template>
    <div 
        class="more-root" 
        :class="{'no-event':changepointer}"
         @scroll="scroll" 
         ref="list"
    >
       <router-link 
        :to="{path:'/hunter/proinfo',query:{_id:m.product_id}}" 
        v-for="m in proList"
        class="ablock"
       >
            <div class="product-item">
                <div class="item-pic">
                    <img :src="m.title_page">
                    <div class="sellout" v-show="!m.can_sell">
                        <img src="static/img/sellout.png">
                    </div>
                </div>
                <p class="item-text">{{m.title}}</p>
                <div class="info">
                    <p>￥{{m.price}}</p>
                    <div class="rating">
                        <img src="static/img/star.png" v-for="n in m.score">
                    </div>
                </div>
            </div>
       </router-link>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data: function() {
            return {
                proList:[],
                isRequest: false,
                isXred:false,
                timer:'',
                start:'',
            }
        },
        computed: {
            ...mapState([
                "proMore",
                "changepointer",
                "currCity"
            ])
        },
        watch:{
            currCity:function(){
                this.proList = [];
                this.requestMore();
                // console.log(111);
            }
        },
        mounted: function() {
            this.requestMore();
            this.timer = setInterval(()=>{
                if(this.isXred){
                    if(sessionStorage.getItem("currentScrollTop")){
                        this.$refs.list.scrollTop = sessionStorage.getItem("currentScrollTop")*1;
                    }
                }
            },10)
            
        },
        methods: {
            requestMore: function() {
                if (this.isRequest) {
                    return;
                }
                this.isRequest = true;
                this.$store.commit("setIsLoading", true);
                this.start = this.proList.length;
                var params = {
                    city_name: this.currCity,
                    module_name: '城市探索',
                    module_id: 67,
                    lng: '',
                    lat: '',
                    start: this.start,
                    publish_date: ''
                }
                this.$store.dispatch("requestProMore", params)
                    .then(res => {
                         this.proList = this.proList.concat(res.data.data.product_list);
                         this.isXred =true;
                         setTimeout(()=> {
                             clearInterval(this.timer);
                         }, 500);

                        if (this.proList.length > 0) {
                            this.isRequest = false;
                            this.$store.commit("setIsLoading", false);
                        }
                    });
            },
            //滚动事件监听函数
            scroll: function(e) {
                if (e.target.scrollHeight - e.target.offsetHeight - 80 <= e.target.scrollTop) {
                    this.requestMore();
                }
                sessionStorage.setItem("currentScrollTop",e.target.scrollTop);
            }
        }
    }
</script>

<style scoped>
    .more-root {
        width: 100vw;
        height: calc(100vh - 44px);
        overflow: scroll;
        background-color: #fff;
    }
    
    .ablock {
        margin-top: 9vw;
        display: block;
        margin-bottom: 3vw;
    }
    
    .product-item {
        display: inline-block;
        width: 84vw;
        margin-left: 8vw;
        /*border: 1px solid black;*/
    }
    
    .item-pic {
        margin-bottom: 8px;
        position: relative;
    }
    
    .item-pic img {
        width: 84vw;
        height: 36vh;
    }
    
    .item-pic .hot-img {
        width: 150px;
        height: 200px;
    }
    
    .item-text {
        margin: 0;
        font-size: 15px;
        color: #4a4a4a;
        width: 84vw;
        /*height: 48px;*/
        overflow: hidden;
        margin-bottom: 5px;
        white-space: wrap;
        line-height: 24px;
    }
    
    .info {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }
    
    .info p {
        margin: 0;
        font-size: 18px;
        color: #f36700;
    }
    
    .rating img {
        width: 10px;
        height: 10px;
        margin: 0 1px;
    }
    
    .sellout {
        position: absolute;
        top: 0;
        left: 0;
        width: 84vw;
        height: 36vh;
        background-color: rgba(255, 255, 255, 0.5);
        text-align: center;
    }
    
    .sellout img {
        width: 40vw;
        height: 40vw;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .no-event {
        pointer-events: none;
    }
    
    .indicator {
        text-align: center;
        font-size: 20px;
    }
</style>